---
id: steps
title: Steps
description: Used to guide users through a series of steps in a process
---

<ComponentPreview id="Steps" />

## Usage

The `Steps` component is used to guide users through a series of steps in a process.

- Supports horizontal and vertical orientations.
- Support for changing the active step with the keyboard and pointer.
- Support for linear and non-linear steps.

```jsx
import { Steps } from '@ark-ui/react/steps'
```

## Examples

### Basic

Here's a basic example of the `Steps` component.

<Example component="steps" id="basic" />

### Controlled Steps

Using the `RootProvider` component, you can control the active step by using the `step` prop and handling the
`onStepChange` event.

<Example id="controlled" />

### Root Provider

An alternative way to control the steps is to use the `RootProvider` component and the `useSteps` store hook.

This way you can access the steps state and methods from outside the steps.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="steps" />

### Context

These are the properties available when using `Steps.Context`, `useStepsContext` hook or `useSteps` hook.

<ContextType id="steps" />
